<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./layui/css/layui.css" />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="content">
      <div class="layui-btn-container" style="width: 100px; margin-right: 10px">
        <button
          id="playVideo"
          type="button"
          class="layui-btn layui-btn-radius layui-btn-normal"
        >
          <i class="layui-icon">&#xe652;</i>播放
        </button>
        <button
          id="pauseVideo"
          type="button"
          class="layui-btn layui-btn-radius layui-btn-normal"
        >
          <i class="layui-icon">&#xe651;</i>暂停
        </button>
        <button
          id="speed"
          type="button"
          class="layui-btn layui-btn-radius layui-btn-warm"
        >
          <i class="layui-icon">&#xe65a;</i>快进
        </button>
        <button id="reverse" type="button" class="layui-btn layui-btn-radius">
          <i class="layui-icon">&#xe65b;</i>快退
        </button>
        <button
          type="button"
          id="muted"
          class="layui-btn layui-btn-radius layui-btn-danger"
        >
          <i class="layui-icon">&#xe685;</i>静音
        </button>
        <button
          type="button"
          id="qrcode"
          class="layui-btn layui-btn-radius layui-btn-normal"
        >
          <i class="layui-icon">&#xe663;</i>二维码
        </button>
      </div>
      <div id="mse"></div>
      <!-- <canvas id="canvas"></canvas> -->
    </div>
    <div class="black"></div>
  </body>
</html>
<script src="./qrcode.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js"></script>
<script src="./socket.js"></script>
<script src="./layui/layui.all.js"></script>
<script>
  var player = new Player({
    id: "mse",
    url: "http://h5player.bytedance.com/video/mp4/xgplayer-demo-720p.mp4",
    poster:
      "http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
    width: 900,
    height: 506,
  });
  // 开始播放
  $("#playVideo").click(() => {
    if (player.hasStart) {
      player.play();
    } else {
      player.start();
      player.play();
    }
  });
  // 暂停播放
  $("#pauseVideo").click(() => {
    player.pause();
  });

  // 快进
  $("#speed").click(() => {
    player.currentTime = player.currentTime + 5;
  });

  // 快退
  $("#reverse").click(() => {
    player.currentTime = player.currentTime - 5;
  });

  // 静音
  $("#muted").click(() => {
    player.muted = player.muted ? false : true;
  });

  // 二维码
  $("#qrcode").click(() => {
    layui.use("layer", function () {
      var layer = layui.layer;
      layer.open({
        type: 1,
        title: false,
        content: `<canvas id="canvas"></canvas>`,
        success: function () {
          QRCode.toCanvas(
            document.getElementById("canvas"),
            "http://192.168.1.5:9000/",
            function (error) {
              if (error) console.error(error);
              console.log("success!");
            }
          );
        },
      });
    });
  });
  const soc = io("http://192.168.1.5:8080");
  //向指定的服务器建立连接，地址可以省略
  // soc.emit("msg", "你好服务器");
  //自定义msg事件，发送‘你好服务器’字符串向服务器
  soc.on("msg", (data) => {
    //监听浏览器通过msg事件发送的信息
    $("#playVideo").click()
  });

  soc.on("pauseVideo", (data) => {
    //监听浏览器通过msg事件发送的信息
    player.pause();
  });

  soc.on("speed", (data) => {
    //监听浏览器通过msg事件发送的信息
    player.currentTime = player.currentTime + 5;
  });

  soc.on("reverse", (data) => {
    //监听浏览器通过msg事件发送的信息
    player.currentTime = player.currentTime - 5;
  });

  soc.on("muted", (data) => {
    //监听浏览器通过msg事件发送的信息
    player.muted = player.muted ? false : true;
  });

  soc.on("qrcode", (data) => {
    //监听浏览器通过msg事件发送的信息
    layui.use("layer", function () {
      var layer = layui.layer;
      layer.open({
        type: 1,
        title: false,
        content: `<canvas id="canvas"></canvas>`,
        success: function () {
          QRCode.toCanvas(
            document.getElementById("canvas"),
            "http://192.168.1.5:9000/",
            function (error) {
              if (error) console.error(error);
              console.log("success!");
            }
          );
        },
      });
    });
  });
  /* QRCode.toDataURL(document.getElementById("canvas"), "http://www.baidu.com", function (
    error
  ) {
    if (error) console.error(error);
    console.log("success!");
  }); */
</script>
